<template>
	<view>
		<view class="backBox">
			<view class="iconBox" @click="back">
				<image src="../../static/mine_1.png"></image>
				<text>{{pageTit}}</text>
			</view>
		</view>
		
		<view class="container">
			<view class="form-box">
				<view class="form">
					<view class="box" @click="wakeMap">
						<view class="box-a" v-if="form.addr">
							<view class="box-text">
								{{form.addr}}
								<a>{{form.addrDetail}}</a>
							</view>
							 <image src="../../static/edit.png"></image>
						</view>
						<text v-else >选择收货地址 +</text>
					</view>
					<list-cell :hover="false">
						<view class="form-input">
							<view class="label">门牌号</view>
							<input class="input" placeholder="请填写门牌号,例如1层101室" v-model="form.houseNumber"
								placeholder-class="text-color-assist" />
						</view>
					</list-cell>
					<list-cell :hover="false">
						<view class="form-input">
							<view class="label">手机号</view>
							<input class="input" placeholder="请填写收货人手机号码" v-model="form.mobile"
								placeholder-class="text-color-assist" />
						</view>
					</list-cell>
					<list-cell :hover="false">
						<view class="form-input">
							<view class="label">收货人</view>
							<input class="input" placeholder="请填写收货人的姓名" v-model="form.receiver"
								placeholder-class="text-color-assist" />
						</view>
					</list-cell>
					<list-cell :hover="false">
						<view class="form-input">
							<view class="label">性别</view>
							<view class="radio-group">
								<view class="radio" :class="{'checked': form.gender == 0}" style="margin-right: 10px;"
									@tap="form.gender=0">先生</view>
								<view class="radio" :class="{'checked': form.gender == 1}" @tap="form.gender=1">女士</view>
							</view>
						</view>
					</list-cell>
					
					<list-cell  :hover="false">
						<view class="form-input display">
							<view class="label">默认地址</view>
							<u-switch v-model="defaultAddr" active-color="#8d4a32" @change='changeSwitch'></u-switch>
						</view>
					</list-cell>
		
				</view>
				<view class="btn-section">
					<button type="primary" size="default" @tap="save">{{btnText}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'

	export default {
		components: {
			listCell
		},
		data() {
			return {
				form: {
					receiver: '',//姓名
					gender: 0,
					mobile: '',
					houseNumber: '',//门牌号
					addr: '', //详细地址一级
					addrDetail:'',//详细地址二级
					lat: '',
					lng: '',
					defaultAddr:0//默认地址
				},
				defaultAddr:false,
				longitude: 119.274575, //经度
				latitude: 26.03604, //纬度
				btnText:'保存',
				addrId:'',
				pageTit:'新增地址'
			}
		},
		onLoad(e) {
			if(e.id){
				this.getData(e.id);
				this.addrId = e.id;
				this.btnText = '修改';
				this.pageTit = '修改地址';
				
			}
			this.$wxHide()
		},
		methods: {
			
			back(){
				uni.navigateBack()
			},
			//根据id获取地址详情
			getData(id){
				var that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				that.uni_request({
					url: '/api/address/' + id,
					method: 'POST',
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code == 0 || res.data.code == 200) {
							that.form = res.data.data
							if(that.form.defaultAddr == 1){
								that.defaultAddr = true
							}else{
								that.defaultAddr = false
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					},
					fail(e){
						uni.hideLoading()
					},
				})
			},
			
			wakeMap() { //地图定位
				//调用组件请使用对应高德地图key和秘钥 原key到期后不再进行续费
				uni.showLoading({
					title:'模块加载中',
					mask:true
				})
				uni.getLocation({
					type:'gcj02',
					success: (res) => {
						uni.hideLoading()
						this.longitude = res.longitude
						this.latitude = res.latitude
						uni.chooseLocation({
							longitude: this.longitude,
							latitude: this.latitude,
							success: (res) => {
								
								this.form.lng = res.longitude
								this.form.lat = res.latitude
								this.form.addr = res.name 
								this.form.addrDetail = res.address
							}
						})
					},
					fail(e) {
						uni.hideLoading()
						alert('未授权获取您的位置信息，请重新打开网页或在手机隐私设置中授权位置信息后使用')
					}
				})

			},
			//新增地址
			submit(){
				var that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				that.uni_request({
					url: '/api/address',
					method: 'POST',
					data:that.form,
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title:'保存成功',
								icon:'success'
							})
							uni.setStorageSync('firstAdd','first')
							uni.navigateBack()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e){
						uni.hideLoading()
					},
				})
			},
			//修改地址
			upd(){
				var that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				that.uni_request({
					url: '/api/address',
					method: 'PUT',
					data:that.form,
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title:'修改成功',
								icon:'success'
							})
							uni.navigateBack()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e){
						uni.hideLoading()
					},
				})
			},
			//检查from表单
			save() {
				if(!this.form.addr){
					uni.showToast({
						icon:'none',
						title:'请选择收货地址'
					})
					return
				}
				if(!this.form.houseNumber){
					uni.showToast({
						icon:'none',
						title:'请填写门牌号'
					})
					return
				}
				if(!this.form.mobile){
					uni.showToast({
						icon:'none',
						title:'请填写收货人手机号码'
					})
					return
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if(!this.form.receiver){
					uni.showToast({
						icon:'none',
						title:'请填写收货人姓名'
					})
					return
				}
				if(this.addrId){
					this.upd()
				}else{
					this.submit()
				}
				
			},
			changeSwitch(e){
				if(e){
					this.form.defaultAddr = 1
				}else{
					this.form.defaultAddr = 0
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.backBox{
		width: 100vw;
		height: 90px;
		background: $base;
		.iconBox{
			height: 60px;
			@extend %flex-align-center;padding: 0 10px;
			font-size: 17px;color: #fff;letter-spacing: 1px;font-weight: bold;
			image{
				width: 20px;height: 20px;margin-right: 8px;margin-top: 1px;
			}
		}
		
	}
	
	.display{
		display: flex;align-items: center;justify-content: space-between;
	}
	.form-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		color: $text-color-base;

		.form {
			padding: 0 10px;margin-top: -30px;
		}

		.box {
			background: rgb(255, 255, 255);
			font-size: 17px;
			display: flex;align-items: center;justify-content: flex-start;
			color: #000;
			padding: 15px 16px;
			border-radius: 10px 10px 0 0;
			image{
				width: 20px;height: 20px;
			}
			.box-a{
				display: flex;align-items: center;
				.box-text{
					display: flex;flex-direction: column;
					width: calc(100% - 30px);margin-right: 10px;
					a{color: #999;font-size: 13px;}
				}
			}
			text{
				color: $base;font-weight: bold;text-align: center;
				
			}
		}

		.form-input {
			display: flex;
			align-items: center;
			width: 100%;
		}

		.label {
			width: 90px;
			font-size: $font-size-lg;
			color: $text-color-base;
			font-weight: 500;
		}

		.input {
			flex: 1;
			display: flex;
			align-items: center;
		}

		.disabled {
			pointer-events: none;
		}

		.radio-group {
			display: flex;
			justify-content: flex-start;

			.radio {
				padding: 2px 15px 3px 15px;
				border-radius: 6rpx;
				border: 2rpx solid #8d4a32;
				color: #8d4a32;
				font-size: 14px;

				&.checked {
					background-color: #8d4a32;
					color: $text-color-white;
					border: 2rpx solid #8d4a32;
				}
			}
		}

		.btn-section {
			position: fixed;
			bottom: 0;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;

			button {
				font-size: $font-size-base;
				height: 90rpx;
				font-size: 16px;
				letter-spacing: 1px;
				width: 100%;
				border-radius: 0 !important;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>